<template>
	<view class="he-checkbox" :class="[value ? 'he-checkbox--checked' : '', shapeClass,disableClass]" @click="toggle">
		<uni-icons v-if="value" type="checkmarkempty" size="16" color="#fff"></uni-icons>
	</view>
</template>

<script>
	export default {
	name: "checkIcon",
	props: {
		check: {
			type: Boolean,
			default: false,
		},
		shape: {
			type: String,
			default: 'square',
			validator(value) {
				return ['square', 'circle'].includes(value);
			}
		},
		color: {
			type: String,
			default: '#277EEF'
		},
		disable:{
			type: Boolean,
			default: false,
		}
	},
	created() {
		this.value = this.check;
	},
	watch: {
		check(val) {
			this.value = val;
		}
	},
	data() {
		return {
			value: ""
		};
	},
	computed: {
		shapeClass() {
			return `he-checkbox--${this.shape}`;
		},
		disableClass() {
			if (this.disable) {
				return `he-checkbox--disable`
			}
			return ''
			 
		},
	},
	methods: {
		toggle() {
			if(this.disable)return
			this.value = !this.value;
			this.$emit('change', this.value);
		}
	}
}
</script>

<style lang="scss" scoped>
.he-checkbox {
	border: 1px solid #AAAAAA;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	border-radius: 2rpx;
	&--square {
		height: 32rpx;
		width: 32rpx;
	}

	&--circle {
		height: 32rpx;
		width: 32rpx;
		border-radius: 50%;
	}

	&--checked {
		border-color: var(--checkbox-color, #277EEF);
		background-color: var(--checkbox-color, #277EEF);
	}
	&--disable {
		border-color: var(--checkbox-color, #f0f0f0);
		background-color: rgba(#277EEF, 0.8); /* 设置透明度 */
	}
}
</style>